<template>
	<view class="solution-page">
		<view class="page-title">您的软水推荐方案</view>
		<view class="card">
			<view class="card-title">沁园牌 {{ currentResult.product_model }} 型软水机</view>
			<view class="card-content-item" :class="{ active: index % 2 === 0 }" v-for="(item, index) in params1" :key="index">
				<view class="label">{{item.label}}：</view>
				<view class="strong">{{ currentResult[item.key] || '-' }}</view>
				<view class="unit">{{ item.unit }}</view>
			</view>
			<view class="card-title">其他参数</view>
			<view class="card-content-item" :class="{ active: index % 2 !== 0 }" v-for="(item, index) in params2" :key="index">
				<view class="label">{{item.label}}：</view>
				<view class="strong">{{ item.value }}</view>
				<view class="unit">{{ item.unit }}</view>
			</view>
			<view class="card-tips">注：该数值行为仅为参考值，按照人均用水2t/月，硬度取范围的中间值进行计算。实际再生参数，与用户用水习惯、原水实际硬度等多种因素有关。</view>
		</view>

		<view class="bottom-buttons" v-if="matchResultList && matchResultList.length">
			<view class="button left" @click="showOtherSolution">其他方案</view>
			<view class="button right" @click="goToContrast">方案对比</view>
		</view>
	</view>
</template>

<script>
	import { getMatchResultList } from '/common/share.js';
	
	export default {
		// 软水推荐方案
		onShareAppMessage() {
					return {
						title: '软水推荐方案',
						imageUrl: "",
						path: "pages/index/index"
					}
				},
		data() {
			return {
				params1: [
					{ label: '年耗盐量', value: '126', unit: 'kg', key: 'annual_salt_consumption' },
					{ label: '加盐周期', value: '90.1', unit: '天', key: 'salt_addition_interval' },
					{ label: '再生周期', value: '10', unit: '天', key: 'regeneration_cycle' },
					{ label: '建议单次加盐量', value: '40', unit: 'kg', key: 'resin_amount' },
				],
				params2: [
					{ label: '再生周期制水量', value: '2.5', unit: '吨', key: 'regeneration_water_amount' },
					{ label: '单次再生耗盐量', value: '4.20', unit: 'kg', key: 'regeneration_salt_consumption' },
				],
				currentResult: {
					"id": 4,
					"hardness_range": "0-200",
					"hardness_calc": 150,
					"population": "≤2",
					"participants": 2,
					"range_value": "≤2口",
					"product_series": "黑金系列",
					"product_model": "SSQ5170i",
					"water_habits": 4,
					"resin_amount": "10.0",
					"annual_salt_consumption": 46,
					"salt_addition_interval": "78.9",
					"regeneration_cycle": 15,
					"suggested_salt_addition": 10,
					"regeneration_water_amount": "2.0",
					"regeneration_salt_consumption": "1.9",
					"created_at": "2023-05-25 20:00:50",
					"updated_at": "2023-05-25 20:00:50"
				},
				matchResultList: [],
			}
		},
		onLoad(options) {
			this.getMatchResult()
		},
		methods: {
			getMatchResult() {
				console.log(getMatchResultList())
				this.matchResultList = getMatchResultList()
				this.currentResult = this.matchResultList[0] || {}
			},
			showOtherSolution() {
				// this.showAction({ options: [{ label: 1, value: 1}], key: 'tes' })
				const ops = this.matchResultList.map(e => { 
					return {
						label: e.product_model ,
						value: e.product_model 
				}}).filter(e => e.value !== this.currentResult.product_model)
				if (!ops.length) {
					return uni.showToast({
						title: '没有更多方案了',
						icon: 'none'
					})
				}
				this.showAction({ options: ops })
			},
			goToContrast() {
				if (!getMatchResultList() || !getMatchResultList().length) {
					return uni.showToast({
						title: '暂时没有方案对比',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: '/pages/solution-contrast/solution-contrast'
				})
			},
			showAction(item) {
				const { options, key } = item
				uni.showActionSheet({
					itemList: options.map(e => e.label),
					success: (res) => {
						const model = options[res.tapIndex].value
						this.currentResult = this.matchResultList.find(e => e.product_model === model) || {}
					},
					fail: function (res) {
						console.log(res.errMsg);
					},
					complete: () => {
						this.currentActionIndex = null
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.solution-page {
		background-color: #fff;
		padding: 40rpx 0;
		background: url("/static/szbg.png");
		background-size: 100% auto;
		background-position: 0 -160rpx;
		background-repeat: no-repeat;

		.page-title {
			color: #fff;
			font-size: 24px;
			font-weight: bold;
			text-align: center;
		}
	}

	.card {
		margin: 20rpx 20rpx;
		box-sizing: border-box;
		padding: 24rpx;
		border-radius: 10px;
		border: 1px solid #eee;
		background-color: #fff;
		box-shadow: 1rpx 1rpx 2rpx #eee;
	}

	.card-title {
		color: #04158c;
		font-size: 18px;
		letter-spacing: 1px;
		font-weight: bold;
		padding: 10rpx 10rpx;
		padding-bottom: 30rpx;
	}

	.card-content-item + .card-title {
		margin-top: 30rpx;
	}

	.card-content-item {
		display: flex;
		align-items: center;
		padding: 20rpx 10rpx;
		&:last-child {
			margin-bottom: 30rpx;
		}
		&.active {
			background-color: #f2f2f2;
		}

		color: #888;
		.label {
			font-size: 14px;
			font-weight: bold;
			color: #000;
		}
		.strong {
			padding: 0 10rpx;
			color: #45b4e0;
			font-size: 13px;
		}
		.unit {
			font-size: 12px;
		}
	}

	.card-tips {
		font-size: 12px;
		color: #8f8f94;
		line-height: 1.5;
		padding-top: 50rpx;
		padding-bottom: 40rpx;
	}

	.bottom-buttons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom); 
	    padding-bottom: env(safe-area-inset-bottom); 

		.button {
			width: 49.8%;
			color: #fff;
			font-size: 13px;
			background: #374486;
			padding: 24rpx 0;
			text-align: center;

			&.left {
				border-radius: 10px 0 0 0;
			}
			&.right {
				border-radius: 0 10px 0 0;
			}
		}
	}
	
</style>
